<template>
	<view>
		<view class="redbagfixs" @click="showbaginfo" :style="{bottom:redbagheight+'rpx'}">
			<text>每日红包</text>
			<text>进度{{redbagpress}}/{{gress.total}}</text>
		</view>

		<view class="tipbox" v-if="tipshow" :style="{bottom:tipheight+'rpx'}">
			<view class="redbagtip" :style="{transform:'translateX('+translatex+'rpx)' }">
				<image class="redbag-icon" src="/static/image/red-icon.png" mode="aspectFill"></image>
				<view v-if="redbagpress>=gress.total" class="complete">
					已参与{{gress.total}}个抽奖，快去领红包吧~
					<text style="margin: 0 5rpx;font-weight: normal;">|</text>
					<text class="getreceivebag" @click="gotoprizecenter">领取</text>
				</view>
				<view v-else class="joinbefore">
					<text>去参与{{gress.total}}个抽奖，即可领1.88元红包</text>
					<image class="close-icon" src="/static/image/close2icon.png" mode="aspectFill" @click="closebaginfo"></image>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * 固定红包
	 */
	export default {
		props: {
			redbagheight: {
				type: [String, Number],
				default: 25
			},
			tipheight: {
				type: [String, Number],
				default: 30
			},
		},
		data() {
			return {
				translatex: 520,
				tipshow: false,
				timerId: 0, //定时器ID
				gress: {}, //红包进度
				lock: false, //锁
			}
		},
		computed: {
			redbagpress() {
				return this.$common.state.redbagpress;
			}
		},
		methods: {

			//获取红包进度
			bagprgress(isshow = false) {
				this.$HttRequest({
					url: '/redEnvelope/schedule',
					param: ''
				}).then((res) => {
					//console.log(res);
					if (res.status === 10000) {
						this.gress = res.data;
						this.$common.state.redbagpress = res.data.count;
						//是否要打开红包提示
						if (isshow) {
							this.showbaginfo()
						}
						//是否完成红包领取
						if (res.data.status == 2) {
							//关闭悬浮红包
							this.$emit('closefixredbag');
						}
					} else {
						//console.log(res.message)
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//console.log(error)
					//异常错误
					this.$ShowMsg('statusCode：' + error);

				});
			},

			//打开红包提示
			showbaginfo() {
				if (this.lock) {
					return
				}
				//锁定红包
				this.lock = true;
				this.tipshow = true;
				setTimeout(() => {
					this.translatex = 0;
					//自动关闭
					this.timerId = setTimeout(() => {
						this.closebaginfo();
					}, 5000)
				}, 100);

			},
			//关闭红包提示
			closebaginfo() {
				clearTimeout(this.timerId);
				this.translatex = 530;
				setTimeout(() => {
					this.tipshow = false;
					//关闭锁
					this.lock = false;
				}, 1000);
			},
			//前往领奖
			gotoprizecenter() {
				uni.navigateTo({
					url: '/pages/activity/activity'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.getreceivebag {
		font-size: 30rpx;
		color: $uni-color-primary;
	}

	.tipbox {
		position: fixed;
		width: 530rpx;
		height: 120rpx;
		overflow: hidden;
		display: flex;
		align-items: center;
		justify-content: center;

		right: 125rpx;
		z-index: 999;
	}

	.redbagtip {
		width: 520rpx;
		height: 95rpx;
		box-shadow: 0 0 15rpx #c2c2c2;
		border-radius: 10rpx;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: transform .6s;
		transition-timing-function: cubic-bezier(.5, .49, .57, 1.41);
		//transition-timing-function: cubic-bezier(0.25, 1.4, 0.4, 0.85); 
		text {
			font-size: 25rpx;
			margin: 0 10rpx;
			font-weight: bold;
		}

		.redbag-icon {
			width: 44rpx;
			height: 44rpx;
		}
		.complete{
			display: flex;
			font-size: 25rpx;
			justify-content: center;
			align-items: center;
			margin-left: 10rpx;
			font-weight: bold;
		}
		.joinbefore {
			display: flex;
			justify-content: center;
			align-items: center;

			.close-icon {
				width: 40rpx;
				height: 40rpx;
			}
		}

	}

	.redbagfixs {
		z-index: 999;
		width: 109rpx;
		height: 128rpx;
		position: fixed;

		right: 30rpx;
		background-image: url(../../static/image/i_daily.png);
		background-repeat: no-repeat;
		background-size: 109rpx 128rpx;

		animation: yaohuan 2.5s ease 0s infinite;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		text {
			font-size: 15rpx;
			color: #fff;
			margin: 20rpx 0;
			font-weight: bold;
		}
	}

	@keyframes yaohuan {
		0% {
			transform: scale(1);
		}

		70% {
			transform: scale(1.2);
		}

		72% {
			transform: scale(1.2) rotate(-10deg);
		}

		75% {
			transform: scale(1.2) rotate(10deg);
		}

		78% {
			transform: scale(1.2) rotate(-10deg);
		}

		80% {
			transform: scale(1.2) rotate(10deg);
		}

		82% {
			transform: scale(1.2) rotate(-10deg);
		}

		85% {
			transform: scale(1.2) rotate(0deg);
		}

		100% {
			transform: scale(1);
		}
	}
</style>
